<!--
 * @Author: your name
 * @Date: 2020-02-25 13:32:39
 * @LastEditTime: 2020-03-19 13:47:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \福路德扫码系统\html\cksm.html
 -->
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/app-tree.js"></script>
    <style type="text/css">
        .bottom {
            padding: 8px 15px;
        }

        .van-field__control {
            font-size: 16px;
        }

        .pictitle {
            line-height: 24px;
            color: #646566;
            user-select: none;
        }

        .piccontent {
            padding-top: 10px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-right: 15px;
        }

        .rework-title {
            padding: 10px 16px;
            color: #a3a3a3;
            text-align: center;
        }

        .problemReply {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="box">
            <van-nav-bar-main title="5S评审详情" left-arrow @click-left="onClickLeft"></van-nav-bar-main>
            <div class="content">
                <div>
                    <van-field v-model="Score" label="扣分" required center colon readonly>
                    </van-field>

                    <van-field v-model="toUserName" label="责任人" required center colon readonly>
                    </van-field>

                    <van-field v-model="mContent" label="问题描述" rows="3" required center colon autosize type="textarea"
                        readonly>
                    </van-field>

                    <van-cell>
                        <div class="pictitle">现场照片:</div>
                        <div class="piccontent">
                            <div class="van-uploader">
                                <div class="van-uploader__wrapper">
                                    <div class="van-uploader__preview" v-for="(imgItem,imgItemIndex) in imgArray">
                                        <div class="van-image van-uploader__preview-image"
                                            style="overflow: hidden; border-radius: 4px;"
                                            @click="previewImage(imgItemIndex)">

                                            <img :src="serverIP + imgItem" class="van-image__img"
                                                style="object-fit: cover;" />
                                        </div>
                                        <!-- <div class="van-uploader__preview-delete" @click="deleteImgItem(imgItemIndex)">
                                        <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                                    </div> -->

                                    </div>
                                    <!-- <div class="van-uploader__upload" v-if="imgArray.length < 9"
                                    @click="addImage(imgArray.length)">
                                    <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>

                                </div> -->
                                </div>
                            </div>
                        </div>
                    </van-cell>
                </div>


                <div class="problemReply">

                    <van-field label="回复内容" v-model="mContent2" rows="3" required center colon autosize type="textarea"
                        placeholder="请输入回复内容" :readonly="status==1">
                    </van-field>

                    <van-cell>
                        <div class="pictitle">图片</div>
                        <div class="piccontent">
                            <div class="van-uploader">
                                <div class="van-uploader__wrapper">
                                    <div class="van-uploader__preview" v-for="(imgItem,imgItemIndex) in imgArray2">
                                        <div class="van-image van-uploader__preview-image"
                                            style="overflow: hidden; border-radius: 4px;"
                                            @click="previewImage(imgItemIndex)">

                                            <img :src="serverIP + imgItem" class="van-image__img"
                                                style="object-fit: cover;" />
                                        </div>
                                        <div class="van-uploader__preview-delete" @click="deleteImgItem(imgItemIndex)"
                                            v-if="status!=1">
                                            <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                                        </div>
                                    </div>
                                    <div class="van-uploader__upload" v-if="imgArray2.length < 9 && status!=1"
                                        @click="addImage(imgArray2.length)">
                                        <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-cell>

                </div>


            </div>

            <div class="bottom" v-if="feedbackStatus!=1">
                <div class="flex-main">
                    <van-row gutter="30">
                        <van-col :span="24">
                            <van-button type="info" block round :disabled="ifConfirm" :loading="ifConfirm"
                                @click="dealWithProblem">回复问题整改</van-button>
                        </van-col>
                    </van-row>
                </div>
            </div>
        </div>

    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {

        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        var photoBrowser = api.require('photoBrowser');
        var isOpenImg = false;

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            if (!isOpenImg) {
                vm.onClickLeft();
            } else {
                photoBrowser.close();
            }

        });

        api.addEventListener({
            name: 'selectRow'
        }, function (ret, err) {
            var type = ret.value.type;
            var row = ret.value.row;
            if (type == '人员') {
                vm.toUserID = row[0].UserID;
                vm.toUserName = row[0].UserName;
            }
        })


        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                index: api.pageParam.index,
                status: api.pageParam.status,
                showPhone: api.pageParam.showPhone,
                ifConfirm: false,
                serverIP: 'http://' + APP.serverIP(),
                mContent: '',
                mContent2: '',   //回复内容
                imgArray: [],
                imgArray2: [],  //回复图片
                id: api.pageParam.id,
                id2: api.pageParam.id2,
                Score: 0, //得分
                feedbackStatus: 0,
                toUserID: 0,
                toUserName: '',
                showScoreSel: false,
                scoreSelections: [
                    { score: 1, name: '优秀' },
                    { score: 2, name: '良好' },
                    { score: 3, name: '合格' },
                    { score: 4, name: '不合格' },
                ]   //评分选项
            },
            created: function () {
                var that = this;
                that.getProblemData();
                that.getFeedBack();

            },
            methods: {
                getProblemData() {
                    var that = this;
                    APP.ajax('5S_GetDealByDaily', { DailyFSDeID: that.id2 }, function (res) {
                        var result = res.ds[0];
                        if (result) {
                            vm.Score = result.Score;
                            vm.mContent = result.Description;
                            vm.toUserID = result.ToUserID;
                            vm.toUserName = result.ToUserName;
                            vm.imgArray = result.DImgs.split(',');
                        }
                    })
                },
                getFeedBack() {
                    var that = this;
                    APP.ajax('5S_getFeedBackByID', { FSDealID: that.id }, function (res) {
                        var result = res.ds[0];
                        // console.log(JSON.stringify(result))
                        if (result) {
                            vm.mContent2 = result.FeedBack;
                            if (result.FImgs)
                                vm.imgArray2 = result.FImgs.split(',');
                            vm.feedbackStatus = result.Status;
                            vm.status = result.Status;
                            // vm.mContent2 = result.Description;
                            // vm.toUserID = result.ToUserID;
                            // vm.toUserName = result.ToUserName;
                            // vm.imgArray = result.DImgs.split(',');
                        }
                    })
                },
                dealWithProblem() {
                    var obj = {
                        FSDealID: vm.id,
                        FeedBack: vm.mContent2,
                        FImgs: vm.imgArray2.join(',')
                    }
                    // console.log(JSON.stringify(obj))
                    APP.ajax('5S_FeedBack', obj, function (res) {
                        // if (res.ds[0].status == 500) {
                        //     layer.open({
                        //         content: res.ds[0].msg,
                        //         skin: 'msg',
                        //         time: 2
                        //     });
                        // } else {
                        vm.getFeedBack();
                        // }
                    })
                },
                previewImage: function (index) {
                    var that = this;
                    var array = JSON.parse(JSON.stringify(that.imgArray));
                    for (var i in array) {
                        array[i] = that.serverIP + array[i];
                    }
                    photoBrowser.open({
                        images: array,
                        activeIndex: index,
                        bgColor: '#000'
                    }, function (ret) {
                        isOpenImg = true;
                        if (ret) {
                            if (ret.eventType == 'click') {
                                isOpenImg = false;
                                photoBrowser.close();
                            }
                        }
                    })
                },
                deleteImgItem: function (index) {
                    var that = this;
                    that.imgArray.splice(index, 1)
                },
                addImage: function (len) {
                    var that = this;
                    UIAlbumBrowser.imagePicker({
                        max: 9 - len,
                        styles: {
                            nav: {
                                bg: 'rgba(0,0,0,.6)',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        APP.uploadFile('备注图片', ret.path, function (path) {
                                            that.imgArray2.push(path);
                                        })

                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                var repeatImg = function (i) {
                                    if (i == imgLists.length) {
                                        return;
                                    }
                                    UIAlbumBrowser.transPath({
                                        path: imgLists[i].path
                                    }, function (ret, err) {
                                        if (ret) {
                                            APP.uploadFile('备注图片', ret.path, function (path) {
                                                that.imgArray2.push(path);
                                            })
                                            i++;
                                            repeatImg(i);
                                        }
                                    });
                                }
                                repeatImg(0)

                            }

                        }
                    });
                },
                // submitApproval: function () {
                //     var that = this;
                //     if (that.index == 2) {
                //         that.$dialog.confirm({
                //             title: '提示',
                //             message: '拒绝后将流程结束，确认拒绝吗?'
                //         }).then(function () {
                //             that.ifConfirm = true;
                //             api.sendEvent({
                //                 name: 'submitApproval',
                //                 extra: {
                //                     index: that.index,
                //                     content: that.mContent,
                //                     imgArray: that.imgArray
                //                 }
                //             });
                //             api.closeWin();
                //         }).catch(function () {

                //         });
                //     } else {
                //         if (that.reWork && !that.reworkDepart.length) {
                //             layer.open({
                //                 content: '请选择责任返工部门',
                //                 skin: 'msg',
                //                 time: 2
                //             });
                //             return false;
                //         }
                //         if (that.status) {
                //             if (!that.mContent) {
                //                 layer.open({
                //                     content: '请输入审批意见',
                //                     skin: 'msg',
                //                     time: 2
                //                 });
                //                 return false;
                //             }
                //         }

                //         that.ifConfirm = true;
                //         api.sendEvent({
                //             name: 'submitApproval',
                //             extra: {
                //                 index: that.index,
                //                 content: that.mContent,
                //                 imgArray: that.imgArray,
                //                 reworkDepart: that.reworkDepart.join()
                //             }
                //         });
                //         api.closeWin();
                //     }


                // },
                openBaseScreen(str) {
                    var obj;
                    if (str == '人员') {
                        obj = {
                            allowClear: false,
                            cmd: 'getCkUserList',
                            type: str,
                            localSearch: {
                                showText: 'UserName',		//查询结果显示的字段
                                searchBy: ['UserName']		//按那些字段进行搜索
                            },
                            param: {

                            }

                        }
                    }
                    api.openWin({
                        name: 'baseScreen',
                        url: 'tool/baseScreen.html',
                        reload: true,
                        slidBackEnabled: false,
                        allowEdit: true,
                        pageParam: obj
                    })
                },
                onClickLeft: function () {
                    var that = this;
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>